.tab-content > .tab-pane {
    display: none;
}

.tab-content > .active {
    display: block;
}

body .nav-tabs .nav-link.active,
body .nav-tabs .nav-item.show .nav-link {
    background: linear-gradient(0deg, #fafaff, #e0e0ff 66%);
    border-color: #dee2e6 #dee2e6 #f7f7ff;
    /* font-weight:bold; */
}

.tabs-stacked {
    display: flex;
    gap: 2rem;
}

    .tabs-stacked aside {
        flex: 0 0 15rem;
        background: white;
        padding:1rem;
    }

aside > ul.nav-tabs {
   display: flex;
   flex-direction: column !important;
   gap: 0.5rem;
   border: none;
}
    aside > ul.nav-tabs .nav-link {
        border:none;
        padding: 0.25rem 0.5rem;
    }
        aside > ul.nav-tabs .nav-link.active {
            border: none !important;
            background: #e0e0ff !important;
        }

        aside > ul.nav-tabs .nav-link > i{
            width:1.5rem;
            text-align:center;
        }


        .tabs-stacked .nav-content {
            flex: 1;
            max-width: 100%;
            overflow: auto;
        }
.tabs-stacked .tab-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

    .tabs-stacked  .tab-head > * {
        margin: 0;
    }

.overlay{
    display:none;
}


.tabs-top{
    flex-direction: column;
    gap:1rem;
}
    .tabs-top aside {
        max-width:unset !important;
        flex:unset;
        padding:0;
        background:none;
    }

    .tabs-top aside ul{
        flex-direction: row !important;
    }
    .tabs-top .tab-content h2{
        display:none;

    }
    /* typical phone screen resolution */
    @media only screen and (min-width : 1025px) {
        #closeSideMenu{
        display:none;
    }

}
    @media only screen and (max-width : 1024px) {
      
        h1 {
            font-size: 1.2rem;
        }

        h2 {
            font-size: 1rem;
        }

        main > .tabs-stacked aside {
            transition: 0.3s;
            position: fixed;
            width: 300px;
            top: 0;
            left: -100vw;
            height: 100%;
            z-index: 10;
        }

            .tabs-stacked aside.show {
                left: 0;
            }

        aside #closeSideMenu {
            position: absolute;
            top: 0;
            right: 0;
            margin: .5rem;
            cursor: pointer;
        }

        aside.show ~ .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 9;
            display: block;
        }

        #tableID > div:first-child app-select {
            display: none;
        }
    }


@media only screen and (max-width : 768px) {
    .tabs-stacked .tab-head {
        flex-direction: column;
        gap: .5rem;
        align-items: flex-start;
    }
}